<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/global-style.css" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
		.subBox{
    		border-radius: 3px;
    		border-bottom-color: #D0D1D5!important;
    		border:1px #DFE0E4 solid;
    		border-top:0;
    		border-top-left-radius: 0;
    		border-top-right-radius: 0;
    		padding:15px;
    		background-color: #fff;
    		display: none;
    		margin-bottom: 25px;
    	}
		.active-search-form{
			width: 200px!important;
			height: 36px!important;
			position: relative;
			float:right;
			border-radius: 0!important;
			margin-top: 20px;
		}
		.search-focus{
			border-color: #66afe9;
			outline: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		}
		.search{
			width: 100%;
			padding-right: 6px;
			padding-left: 18px;
			border: 0;
			background-color: #fff;
		}
		.nav > li > a:hover, .nav > li > a:focus{
			background-color: #dfdfdf;
		}
		/**********************************************************************/
		#comment-list { list-style: none; padding: 20px 0; }
		#comment-list li { border-bottom: 1px solid #F1F1F1; position: relative; }
		#comment-list a { padding: 20px 0; display: block; text-decoration: none; }
		#comment-list .comment_btn { display: none; position: absolute; top:50%; right: 5px; margin-top: -15px;  }
		#comment-list li:hover .comment_btn, #comment-list li:focus .comment_btn { display: block; }
		#comment-list li:hover .comment-time, #comment-list li:focus .comment-time {display: none;}
		#comment-list li:hover, #comment-list li:focus { background-color: #F5F5F5; }
		.comment-time{ position: absolute; right:5px; color: #ccc; font-size: 13px; top:40%; }
		.comment-postImage{ position: absolute; left:5px; top:17%; width:45px; height:45px; }
		.comment-content { padding-left: 65px; }
		#following-list { list-style: none; padding: 20px 0; }
		#following-list li { float: left; margin-right: 10px; margin-bottom: 10px; position: relative; }
		#following-list li:hover .profile-btn, #following-list li:focus .profile-btn {display: block;}
		#follower-list { list-style: none; padding: 20px 0; }
		#follower-list li { float: left; margin-right: 10px; margin-bottom: 10px; position: relative; }
		#follower-list li:hover .profile-btn, #follower-list li:focus .profile-btn {display: block;}
		.profile-btn { position: absolute; left: 5px; bottom: 10px; width: 70px; display: none; }
		.profile-image { width:200px; height: 200px; }
		.profile-name { position: absolute; top: 5px; left: 5px; padding: 3px 5px; color:#fff; font-weight:400; background-color:rgba(0,0,0,0.8);}
		.profile-info { position: absolute; top: 38px; left: 5px; background-color:rgba(0,0,0,0.8); }
		.profile-info i.followerCnt{ font-size: 12px; color: #fff; position: relative; z-index: 2;}
		.profile-info i.followerCnt > i { font-size: 11px; color: #C0C0C0; position: absolute; top: 1px; left: 8px; z-index: -1;}
		.profile-info span { font-size:11px; color: #fff; }
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->
<div class="container" style="margin-top: 25px;">
	<div style="width: 100%;">
		<ul class="nav nav-tabs nav-justified" id="activity-menu">
			<li class="active"><a href="#comment" style="height:43px;"><i class="fa fa-comment"></i>&nbsp;<span id="commentCnt">${commentCnt}</span>&nbsp;<spring:message code="post.comment"/></a></li>
			<li><a href="#following"><i class="ion-person-stalker" style="color:#646464;margin-right:6px;font-size:18px;"></i><span id="followingCnt">${followingCnt}</span>&nbsp;<spring:message code="common.following"/></a></li>
			<li><a href="#follower"><i class="ion-person-stalker" style="color:#646464;margin-right:6px;font-size:18px;"></i><span id="followerCnt">${followerCnt}</span>&nbsp;<spring:message code="common.followers"/></a></li>
		</ul>
	</div>
	<div style="float: none; clear: both;"></div>
	<div style="width:100%;">
		<div class="subBox" style="min-height: 220px;">
			<ul id="comment-list"></ul>
			<div id="comment-loading" style="text-align: center; padding:25px 0; display: none;"><img src="/resources/img/loading-20x20-white.gif"></div>
			<div id="more-comment" style="text-align:center;"><button class="btn btn-default" style="width: 120px;" onclick="getMoreMyComment()">더 불러오기</button></div>
		</div>
		<div class="subBox">
			<div class="form-control active-search-form">
				<i class="fa fa-search" style="color:#989898; position: absolute; top:9px; left: 8px;"></i>
				<input type="text" class="search" data-type="following-list" placeholder="<spring:message code="common.search_user"/>">
			</div>
			<div class="clearfix"></div>
			<ul id="following-list"></ul>
			<div id="following-loading" style="text-align: center; padding:25px 0; display: none;"><img src="/resources/img/loading-20x20-white.gif"></div>
			<div id="more-following" style="text-align:center;"><button class="btn btn-default" style="width: 120px;" onclick="getMoreFollowing()">더 불러오기</button></div>
		</div>
		<div class="subBox">
			<div class="form-control active-search-form">
				<i class="fa fa-search" style="color:#989898; position: absolute; top:9px; left: 8px;"></i>
				<input type="text" class="search" data-type="follower-list" placeholder="<spring:message code="common.search_user"/>">
			</div>
			<div class="clearfix"></div>
			<ul id="follower-list"></ul>
			<div id="follower-loading" style="text-align: center; padding:25px 0; display: none;"><img src="/resources/img/loading-20x20-white.gif"></div>
			<div id="more-follower" style="text-align:center;"><button class="btn btn-default" style="width: 120px;" onclick="getMoreFollower()">더 불러오기</button></div>
		</div>
	</div>
</div>
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script src="/resources/js/hangul.min.js"></script>
<script type="text/javascript">
	var commentIndex = 0;
	var followingIndex = 0;
	var followerIndex = 0;
	var hasComment = false;
	var hasFollwing = false;
	var hasFollower = false;
	
	
   	$(function(){
   		getMyComment();
   		$("#comment-list").parent().fadeIn();
   		$("#activity-menu > li > a").click(function(){
   			$("#activity-menu > li").each(function(){
   				$(this).removeClass("active");
   			});
   			$(this).parent().addClass("active");
   			if($(this).attr("href") == "#comment"){
   				$("#following-list").parent().hide();
   				$("#follower-list").parent().hide();
   				$("#comment-list").parent().show();
   				getMyComment();
   			}else if($(this).attr("href") == "#following"){
   				$("#comment-list").parent().hide();
   				$("#follower-list").parent().hide();
   				$("#following-list").parent().show();
   				getFollowing();
   			}else if($(this).attr("href") == "#follower"){
   				$("#comment-list").parent().hide();
   				$("#following-list").parent().hide();
   				$("#follower-list").parent().show();
   				getFollower();
   			}
   		});
   		
   		$(".search").keyup(function(){
   			var searchValue = $(this).val();
			if(searchValue == ""){
				$("#"+$(this).data("type")+" > li").each(function(){
					$(this).show();
				});
			}else{
				$("#"+$(this).data("type")+" > li").each(function(){
					if(Hangul.search($(this).children("a").children(".profile-name").html(), searchValue) == -1){
						$(this).hide();
					}else{
						$(this).show();
					}
				});
			}
			
		}).focus(function(){
			$(this).parent().addClass("search-focus");
		}).blur(function(){
			$(this).parent().removeClass("search-focus");
		});
   	});
   	
   	function getMoreMyComment(){
   		hasComment = true;
   		commentIndex += 100;
   		getMyComment();
   	}
   	
   	function getMyComment(){
   		if($("#comment-list").is(":empty") || hasComment){
   			$.ajax({
   	   		    type : "get"
   	   		    , url : "/getMyComment?idx=${userDto.idx}&index="+commentIndex
   	   		    , dataType : "json"
   	   		    , timeout : 5000
   	   		    , error : function(request, status, error) {
					$("#comment-list").html("<p style='text-align: center;'>댓글을 가져오는대 실패하였습니다 다시 시도해주세요</p>");
   	   		    }
   	   		    , success : function(response) {
					if(response.length < 100){
						$("#more-comment").hide();
					}
					if(response.length == 0){
						$("#comment-list").html("<div style='text-align:center; margin-bottom: 25px;margin-top:35px;'><p><i class='fa fa-comment' style='font-size:36px; color: #C5C5C5;'></i></p><h4 style='color:#999;'>작성한 댓글이 없습니다</h4></div>");
					}else{
						for(var i=0;i<response.length;i++){
							var html = "<li><div style='position: relative;'><a target='_blank' href='/p/"+response[i].url+"'><img class='comment-postImage' src='/resources/upload/post/thumbnail/"+response[i].postImage+"'><p class='comment-content'>"+response[i].content.parseEmoji()+"</p></a><span class='comment-time'>"+timeleft(response[i].create_date)+"</span></div><button type='button' class='btn btn-default btn-sm comment_btn' onclick='comment_del(this, "+response[i].idx+")'><i class='fa fa-trash-o'></i></button></li>";
							$("#comment-list").append(html);
						}
					}
					
   	   		    }
   	   		    , beforeSend: function() {
   	   		    	$('#comment-loading').show(); 
   	   		    }
   	   		    , complete: function() {
   	   		    	$('#comment-loading').hide();
   	   		    }
   	   		});
   		}
   	}
   	
   	function getMoreFollowing(){
   		hasFollowing = true;
   		followingIndex += 50;
   		getFollowing();
   	}
   	
   	function getFollowing(){
   		if($("#following-list").is(":empty") || hasFollowing){
   			var data = "index="+followingIndex+"&idx=${userDto.idx}";
   			$.ajax({
   	   		    type : "get"
   	   		    , url : "/getFollowingProfile"
   	   		    , data : data
   	   		    , dataType : "json"
   	   		    , timeout : 5000
   	   		    , error : function(request, status, error) {
					$("#following-list").html("<li><h4>팔로잉 목록을 가져올 수 없습니다</h4></li>");
   	   		    }
   	   		    , success : function(response) {
   	   		    	if(response.length < 50){
						$("#more-following").hide();
					}
					if(response.length == 0){
						$("#following-list").html("<div style='text-align:center; margin-bottom: 25px;'><p><i class='ion-person-stalker' style='font-size:60px; color: #aaa; position: relative;'></i></p><h4 style='color:#999;'>팔로잉 없음</h4></div>");
					}else{
						for(var i=0;i<response.length;i++){
	   	   		    		var html = "<li><a target='_blank' href='/"+response[i].id+"'><span class='profile-name'>"+response[i].name+"</span><img class='profile-image' src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'><p class='profile-info'><i class='glyphicon glyphicon-user followerCnt'><i class='glyphicon glyphicon-user'></i></i><span style='margin-left:10px;'>"+response[i].followerCnt+"</span><i class='glyphicon glyphicon-picture postCnt' style='color:#fff;font-size:13px;margin-left:6px;'></i><span style='margin-left: 7px;'>"+response[i].postCnt+"</span></p></a>";
		   	   		    	if(response[i].followState == "unFollow"){
	                        	html += "<button type='button' class='btn btn-primary btn-sm profile-btn' onclick='profile_follow(this, \"follow\", "+response[i].idx+");'>팔로우</button></div>";
	                        }else if(response[i].followState == "following"){
	                        	html += "<button type='button' class='btn btn-success btn-sm profile-btn' onclick='profile_follow(this, \"unfollow\", "+response[i].idx+");'><i class='fa fa-check'></i>&nbsp;팔로잉</button></div>";
	                        }
							html += "</li>";
	   	   		    		$("#following-list").append(html);
	   	   		    	}
						$("#following-list").append("<div class='clearfix'></div>");
					}
   	   		    }
   	   		    , beforeSend: function() {
   	   		    	$('#following-loading').show(); 
   	   		    }
   	   		    , complete: function() {
   	   		    	$('#following-loading').hide();
   	   		    }
   	   		});
   		}
   	}
   	
   	function getMoreFollower(){
   		hasFollower = true;
   		followerIndex += 50;
   		getFollower();
   	}
   	
   	function getFollower(){
   		if($("#follower-list").is(":empty") || hasFollower){
   			var data = "index="+followerIndex+"&idx=${userDto.idx}";
   			$.ajax({
   	   		    type : "get"
   	   		    , url : "/getFollowerProfile"
   	   		    , data : data
   	   		    , dataType : "json"
   	   		    , timeout : 5000
   	   		    , error : function(request, status, error) {
					$("#follower-list").html("<li><h4>팔로워 목록을 가져올 수 없습니다</h4></li>");
   	   		    }
   	   		    , success : function(response) {
   	   		    	if(response.length < 50){
   	   		    		$("#more-follower").hide();
   	   		    	}
   	   		    	if(response.length == 0){
   	   		    		$("#follower-list").html("<div style='text-align:center; margin-bottom: 25px;'><p><i class='ion-person-stalker' style='font-size:60px; color: #aaa; position: relative;'></i></p><h4 style='color:#999;'>팔로워 없음</h4></div>");
   	   		    	}else{
	   	   		    	for(var i=0;i<response.length;i++){
	   	   		    		var html = "<li><a target='_blank' href='/"+response[i].id+"'><span class='profile-name'>"+response[i].name+"</span><img class='profile-image' src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'><p class='profile-info'><i class='glyphicon glyphicon-user followerCnt'><i class='glyphicon glyphicon-user'></i></i><span style='margin-left:10px;'>"+response[i].followerCnt+"</span><i class='glyphicon glyphicon-picture postCnt' style='color:#fff;font-size:13px;margin-left:6px;'></i><span style='margin-left: 7px;'>"+response[i].postCnt+"</span></p></a></li>";
	   	   		    		$("#follower-list").append(html);
	   	   		    	}
						$("#follower-list").append("<div class='clearfix'></div>");
   	   		    	}
   	   		    	
   	   		    }
   	   		    , beforeSend: function() {
   	   		    	$('#follower-loading').show(); 
   	   		    }
   	   		    , complete: function() {
   	   		    	$('#follower-loading').hide();
   	   		    }
   	   		});
   		}
   	}
   	
    function profile_follow(obj, type, idx) {
        var data = "following_idx="+idx;
        if (type == "follow") {
        	$(obj).html("<img src='/resources/img/primary-btn-loading.gif'>");
			setTimeout(function(){
				$.ajax({
					type: "post",
					url: "/follow",
					data: data,
					dataType: "text",
					timeout: 5000,
					error: function () {
					    alertShow("danger", "다시 시도해주세요", 2000);
					},
					success: function (response) {
						if (response == "success") {
					        $(obj).removeClass("btn-primary").addClass("btn-success").html("<i class='fa fa-check'></i>&nbsp;팔로잉").attr("onclick", "profile_follow(this, 'unfollow', "+idx+");").hide().fadeIn();
					    } else if (response == "closed") {
					        alertShow("danger", "팔로우를 받지 않는 사용자입니다", 2000);
					    } else if (response == "role") {
					        alertShow("danger", "로그인이 필요합니다", 2000);
					    } else {
					        alertShow("danger", "다시 시도해주세요", 2000);
					    }
					    $("#followingCnt").html(parseInt($("#followingCnt").html())+1);
					},
					complete: function(){
                 	}
             	});
        	}, 1000);
            
        } else {
			$(obj).html("<img src='/resources/img/success-btn-loading.gif'>");
			setTimeout(function(){
				$.ajax({
					type: "post",
					url: "/unFollow",
					data: data,
					dataType: "text",
					timeout: 5000,
					error: function () {
						alertShow("danger", "다시 시도해주세요", 2000);
					},
					success: function (response) {
						if (response == "fail") {
							alertShow("danger", "다시 시도해주세요", 2000);
						}else{
							$(obj).removeAttr("data-state").removeClass("btn-success").addClass("btn-primary").attr("onclick", "profile_follow(this, 'follow', "+idx+");").html("팔로우").hide().fadeIn();
						}
						$("#followingCnt").html(parseInt($("#followingCnt").html())-1);
					}
				});
        	}, 1000);
        }
    }

   	function comment_del(obj, idx){
   		if(confirm('정말로 삭제할까요?')){
   			$.ajax({
       			type : "post"
   			    , url : "/commentDelete?comment_idx="+idx
   			    , dataType : "text"
   			    , timeout : 5000
   			    , error : function() {
   			    	alertShow("danger","다시 시도해주세요", 2000);
   			    }
   			    , success : function(response) {
   			    	if(response == "execute"){
   			    		$(obj).parent().remove();
   			    		$("#commentCnt").html(parseInt($("#commentCnt").html())-1);
   			    		alertShow("success","삭제되었습니다", 2000);
   			    	}else if(response == "fail"){
   			    		alertShow("danger","다시 시도해주세요", 2000);
   			    	}else{
   			    		location.href='/warning.jsp';
   			    	}
   			    }
       		});
   		}
   	}
</script>
</body>
</html>